<template>
  <div id="app">
    <div class="container">
      <div class="close" @click="$router.push({ path: '/' })">
        <span class="iconfont iconicon-test"></span>
      </div>
      <div class="logo"><span class="iconfont iconnew"></span></div>
      <div class="inputs">
        <!-- <input placeholder="请输入手机号" class="input" /><input
          placeholder="密码"
          class="input"
          type="password"
        /> -->

        <!-- 在使用子组件的时候，为子组件赋值属性，优先给子组件的props成员赋值，如果props中没有对应的设置，那么就直接给组件的根元素赋值 -->
        <!-- <hminput
          placeholder="用户名 / 手机号码"
          :value="user.username"
          @input="handler"
        ></hminput> -->
        <hminput
          placeholder="用户名 / 手机号码"
          @blur="handlerinput"
          v-model="user.username"
          :rule="
            /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
          "
        ></hminput>
        <hminput placeholder="密码" v-model="user.password"></hminput>
      </div>
      <p class="tips">
        没有账号？
        <a href="#/register" class="">去注册</a>
      </p>
      <!-- 登录按钮 -->
      <hmbutton type="danger" @click="login">登录</hmbutton>
    </div>
  </div>
</template>

<script>
// 引入按钮组件
import hmbutton from "@/components/hmbutton.vue";
// 引入文本框组件
import hminput from "@/components/hminput.vue";
// // 引入的axios已经配置好基准路径
// // import axios from "axios";
// import axios from "@/utils/myaxios";

// 登录请求模块
import { loginuser } from "@/apis/user.js";

export default {
  data() {
    return {
      user: {
        username: "15333333333",
        password: "666666",
      },
      id: "",
    };
  },
  // 注册引入组件
  components: {
    hmbutton,
    hminput,
  },
  methods: {
    async login(e) {
      try {
        // 用户登录请求
        let res = await loginuser(this.user);
        console.log("------", res, res.data.data.user.id);
        if (res.data.statusCode == 200) {
          // 将后台返回的token存储到本地存储
          localStorage.setItem("toutiao_59_token", res.data.data.token);
          localStorage.setItem("toutiao_59", JSON.stringify(this.user));
          localStorage.setItem(
            "toutiao_59_id",
            JSON.stringify((this.id = res.data.data.user.id))
          );
          location;
          //登录成功后跳转
          if (location.hash.split("redirect=")[1]) {
            // console.log(
            //   location.hash.split("redirect=")[1],
            //   typeof location.hash.split("redirect=")[1]
            // );
            this.$router.push({
              // 跳转到之前观看的文章
              path: location.hash.split("redirect=#")[1],
            });
          } else {
            this.$router.push({
              path: "/personal/" + res.data.data.user.id,
            });
          }
        }
      } catch (error) {
        //使用不使用箭头好函数this=underfunded，就使用不了Vant挂载的$toast
        //  Vant挂载到vue的对象$toast
        // console.dir(error);//可以显示一个对象的所有属性和方法
        // console.log(error.response.data);
        this.$toast.fail({
          position: "top",
          message: "输入的用户名或密码错误",
        });
      }
      // await:等待，它可以实现   先等待异步操作执行完毕，再继续后面的代码的执行
      // 它可以获取then中的回调参数，并返回
      // await必须保证它所在的函数是async函数

      console.log(this.user.username, this.user.password);
    },

    // 用户输入手机号不合法
    handlerinput() {
      if (!/^1\d{10}$|^1\d{4}$/.test(this.user.username))
        this.$toast("用户名输入不正确");
    },
    // handler(v) {
    //   // let v = e.target.value;
    //   this.user.username = v;
    // },
  },
};
</script>

<style lang="less" scoped>
.container {
  padding: 20px;
}

.close {
  span {
    font-size: 27 / 360 * 100vw;
  }
}

.logo {
  display: flex;
  justify-content: center;

  span {
    display: block;
    font-size: 126 / 360 * 100vw;
    color: #d81e06;
  }
}

.inputs {
  input {
    margin-bottom: 20px;
  }
}

.tips {
  text-align: right;
  margin-bottom: 20px;

  a {
    color: #3385ff;
  }
}
</style>